<template>
    <div class="leaderboard-container">
        <div class="leaderboard-content">
            <div v-for="(player, index) in players" :key="index" class="player-row">
                <div class="rank">{{ index + 5 }}</div>
                <div class="player-name">{{ player.name }}</div>
                <div class="score">{{ player.score }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
    players: {
        type: Array,
        default: () => [
            { name: '玩家1', score: 100 },
            { name: '玩家2', score: 80 },
            { name: '玩家3', score: 60 },
            { name: '玩家3', score: 60 },
            { name: '玩家3', score: 60 },
            { name: '玩家3', score: 60 },
            { name: '玩家3', score: 60 },
            { name: '玩家3', score: 60 },
            { name: '玩家3', score: 60 },
        ],
        validator: (value) => {
            return value.every(player => 
                typeof player.name === 'string' && 
                typeof player.score === 'number'
            )
        }
    }
})
</script>

<style lang="less">
.leaderboard-container {
    position: absolute;
    left: 1%;
    bottom: 1%;
    width: 100%;
    height: 100%;
    max-width: 300px;
    max-height: 200px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    z-index: 1000;
    .leaderboard-content {
        max-height: 200px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }
        &::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }
        &::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }
        .player-row {
            display: flex;
            align-items: center;
            padding: 5px;
            margin-bottom: 3px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            transition: transform 0.2s;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.1),
                    transparent
                );
                transition: left 0.5s;
            }
            &:hover {
                background: rgba(255, 255, 255, 0.15);
                &::before {
                    left: 100%;
                }
            }
            &:not(:hover)::before {
                transition: none;
                left: -100%;
            }
            .rank {
                width: 20px;
                font-weight: bold;
                color: #fff;
            }
            .player-name {
                flex: 1;
                margin: 0 15px;
                color: #fff;
            }
            .score {
                font-weight: bold;
                color: #fff;
                min-width: 80px;
                text-align: right;
            }
        }
    }
}
</style>